<template>
	<div class="dataP-right ignore-visual-components-bottomtp" id="bootommtp-datap-right">
		<div class="footer-pan"></div>
		<div class="global-visualization-box-head title">
			<span class="text">碳减量分析</span>
		</div>
		<div class="radioTitle">
			<span>碳减量相当于</span>
		</div>
		<div class="box" v-for="(item,index) in data" :key="index">
			<div class="footer-pan"></div>
			<div class="contentBox">
				<div class="leftBox">
					<img :src="item.img" alt="">
					<span class="title">{{ item.title }}</span>
				</div>
				<div class="right">
					<span class="num">{{ item.value }}</span>
					<span class="unit">{{ item.unit }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '@/common/request.js';
	import $config from '@/common/config.js';
	export default {
		data() {
			return {
				data: [{
						title: "煤炭",
						value: "1.237",
						unit: "吨",
						img: $config.comstatic + "/reddImg/meitan.png"
					},
					{
						title: "树木",
						value: "568",
						unit: "棵",
						img: $config.comstatic + "/reddImg/tree.png"
					}
				]
			}
		},
		methods: {
			getDetailData() {
				request.get('/jeecgboot/statistic/carbon/data2?projectId=' + $config.pcode).then(res => {
					console.log(res, '----res*******')
					this.data[0].value = (res.result.coal * 10).toFixed(1)
					this.data[1].value = res.result.tree.toFixed(1)

				})
			}
		},
		created() {
			this.getDetailData()
		}
	}
</script>

<style lang="less" scoped>
	.dataP-right {
		padding: 12px;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		border: 1px solid rgba(255, 255, 255, 0.3);
		position: relative;
		
		// .global-visualization-box-head{
		// 	margin:14px 0 0 0;
		// }

		&::before {
			position: absolute;
			top: -2px;
			left: -2px;
			width: 16px;
			height: 16px;
			border-top: 3px solid #76828F;
			border-left: 3px solid #76828F;
			content: '';
		}

		&::after {
			position: absolute;
			top: -2px;
			right: -2px;
			width: 16px;
			height: 16px;
			border-top: 3px solid #76828F;
			border-right: 3px solid #76828F;
			content: '';
		}

		.radioTitle {
			span {
				color: #93D8FF;
				font-weight: 500;
				font-size: 1.6vh;
			}
		}

		.box {
			display: flex;
			box-sizing: border-box;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: center;
			text-align: left;
			height: 28%;
			width: 100%;
			background: linear-gradient(90deg, #55839b 0%, rgba(61, 124, 218, 0) 100%);
			background-size: 100% 100%;
			position: relative;
			padding: 5px 15px;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				width: 10px;
				height: 10px;
				border-top: 2px solid #9fa1aa;
				border-left: 2px solid #9fa1aa;
				content: '';
			}

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				width: 10px;
				height: 10px;
				border-top: 2px solid #76828F;
				border-right: 2px solid #76828F;
				content: '';
			}

			.footer-pan {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;

				&::before {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 10px;
					height: 10px;
					border-bottom: 2px solid #9fa1aa;
					border-left: 2px solid #9fa1aa;
					content: '';
				}

				&::after {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 10px;
					height: 10px;
					border-bottom: 2px solid #76828F;
					border-right: 2px solid #76828F;
					content: '';
				}
			}

			.contentBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 0 10px;
				height: 36px;

				.leftBox {
					display: flex;
					align-items: center;
					font-size: 1.6vh;

					img {
						margin-right: 14px;
						// width: 36px;
						// height: 26px;
						width: 3vh;
						height: 2vh;
					}
				}

				.right {
					display: flex;
					align-items: flex-end;

					.num {
						// font-size: 22px;
						font-size: 2.4vh;
						font-family: Akrobat-Regular, Akrobat;
						color: #93D8FF;
						line-height: 1;
						margin-right: 10px;
					}

					.unit {
						// font-size: 14px;
						font-size: 1.6vh;
					}
				}
			}

			.v-line {
				height: 52%;
				width: 2px;
				background-color: #6787a7;
				margin: 0 20px;
			}

			.col {
				.row2 {
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;
					align-items: center;
					color: #93d8ff;

					.value,
					.percent {
						font-family: 'pieFont';
						font-size: 24px;
					}

					.value {
						min-width: 60px;
						margin-right: 5px;
					}

					.unit,
					.percent {
						text-align: right;
					}

				}
			}
		}

		.footer-pan {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;

			&::before {
				position: absolute;
				bottom: -2px;
				left: -2px;
				width: 16px;
				height: 16px;
				border-bottom: 3px solid #76828F;
				border-left: 3px solid #76828F;
				content: '';
			}

			&::after {
				position: absolute;
				bottom: -2px;
				right: -2px;
				width: 16px;
				height: 16px;
				border-bottom: 3px solid #76828F;
				border-right: 3px solid #76828F;
				content: '';
			}
		}

		.title {
			margin: 0;
			// background-color: pink;
			width: 100%;
			min-width: 16px;
		}

	}

	.ignore-visual-components-bottomtp {
		.box {
			img {
				min-width: 14px;
				min-height: 14px;
			}

			.col {
				.row1 {
					line-height: normal;
				}

				.row2 {
					line-height: normal;
				}
			}
		}
	}
</style>
